<template>
  <div style="add-optional-report">
    <el-dialog
      width="100%"
      title="自选生成薪资报表"
      :visible.sync="visible"
      @close="handleClose"
    >
      <div class="content">
        <el-row :gutter="20" type="flex" justify="space-between">
          <el-col :span="4"
            ><el-input
              size="small"
              v-model="search.ddbh"
              placeholder="搜索表头字段"
              clearable
              prefix-icon="el-icon-search"
              @change="onSearch"
          /></el-col>
          <el-col style="flex: 1">
            <el-radio-group
              v-model="labor"
              size="mini"
              @change="handleRadioChange"
            >
              <el-radio
                v-for="(item, index) in laborTemplate"
                :key="index"
                :label="item.lable"
                border
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-col>
          <el-col style="width: 150px; text-align: right">
            <el-button size="small" @click="visible = false">取消</el-button>
            <el-button size="small" type="primary" @click="setTemp"
              >确定</el-button
            >
          </el-col>
        </el-row>

        <div class="check-box">
          <div
            class="checkbox-item"
            v-for="(item, index) in templateData"
            :key="index"
          >
            <div class="item-title">
              <el-checkbox
                :indeterminate="checkedData[index].isIndeterminate"
                v-model="checkedData[index].checkAll"
                @change="(val) => handleCheckAllChange(val, index)"
                >{{ item.name }}</el-checkbox
              >
            </div>
            <div class="item-content">
              <el-checkbox-group
                v-model="checkedData[index].data"
                @change="(val) => handleCheckedItemChange(val, index)"
              >
                <el-checkbox
                  style="margin-bottom: 8px; margin-top: 8px"
                  v-for="items in item.data"
                  :key="items.id"
                  :label="items.attribute"
                  >{{ items.dec }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateTemplateFieldAttribution,
  queryTemplateFieldAttribution,
} from '@/api/salaryReport';

export default {
  data() {
    return {
      search: {},
      visible: false,
      labor: '1',
      laborTemplate: [
        {
          lable: '1',
          name: '劳资模板一',
        },
        {
          lable: '2',
          name: '劳资模板二',
        },
        {
          lable: '3',
          name: '劳资模板三',
        },
        {
          lable: '4',
          name: '劳资模板四',
        },
      ],
      tempData: [],
      templateData: [],
      checkedData: [
        {
          key: 'basicInfo',
          checkAll: false,
          isIndeterminate: false,
          data: [],
        },
        {
          key: 'varietiesParameterInfo',
          checkAll: false,
          isIndeterminate: false,
          data: [],
        },
        {
          key: 'yieldInfo',
          checkAll: false,
          isIndeterminate: false,
          data: [],
        },
        {
          key: 'salaryInfo',
          checkAll: false,
          isIndeterminate: false,
          data: [],
        },
      ],
      form: {},
    };
  },
  created() {
    this.getTempData(1);
  },
  computed: {
    // orderOption() {
    //   return this.$store.getters.orderTypeOption;
    // },
    // pzOption() {
    //   return this.$store.getters.pzOption;
    // },
    // cjOption() {
    //   return this.$store.getters.cjOption;
    // },
    // branchOption() {
    //   return this.$store.getters.branchOption;
    // },
    headColor() {
      return function (index) {
        switch (index) {
          case 0:
            return '4px solid #65D1D1';
          case 1:
            return '4px solid #1AB55A';
          case 2:
            return '4px solid #737DF4';
          case 3:
            return '4px solid #FF3567';
        }
      };
    },
  },
  methods: {
    //选择模版
    handleRadioChange(val) {
      this.getTempData(val);
    },
    // 获取模版数据
    getTempData(templateNumber) {
      queryTemplateFieldAttribution({
        gongxu: '细纱',
        templateNumber: templateNumber,
      }).then((res) => {
        if (res.code == 1) {
          let data = [
            {
              name: '基本信息类',
              data: [],
            },
            {
              name: '品种公定参数类',
              data: [],
            },
            {
              name: '产量数据类',
              data: [],
            },
            {
              name: '薪资类',
              data: [],
            },
          ];
          data[0].data = res.data.basicInfo;
          data[1].data = res.data.varietiesParameterInfo;
          data[2].data = res.data.yieldInfo;
          data[3].data = res.data.salaryInfo;
          
          this.tempData =  data;
          this.templateData =  data;
          data.forEach((item,index) =>{
            let checkArr = [];
            item.data.forEach(d => {
              if(d.flag == '1'){
                checkArr.push(d.attribute)
              }
            }) 
            this.checkedData[index].data = checkArr
            this.handleCheckedItemChange(checkArr,index)
          })
        }
      });
    },
    handleCheckAllChange(val, index) {
      this.checkedData[index].data = val
        ? this.templateData[index].data.map((item) => item.attribute)
        : [];
      this.checkedData[index].isIndeterminate = false;
    },
    handleCheckedItemChange(val, index) {
      console.log(val,index);
      let checkedCount = val.length;
      this.checkedData[index].checkAll =
        checkedCount === this.templateData[index].data.length;
      this.checkedData[index].isIndeterminate =
        checkedCount > 0 && checkedCount < this.templateData[index].data.length;
    },
    show() {
      this.visible = true;
    },
    async addPlan() {
      const res = await addPrePlan(this.form);
      if (res.code == 1) {
        this.$message.success('添加计划成功');
        this.handleClose();
      }
    },
    handleClose() {
      this.form = {};
      this.visible = false;
      this.$emit('close');
    },
    onSearch(val) {
      if (val) {
        let resault = [];
        this.tempData.forEach((item) => {
          let nameData = item.data.filter((d) => d.dec.indexOf(val) > -1);
          if (nameData.length > 0) {
            resault.push({
              name: item.name,
              data: nameData,
            });
          }
        });
        this.templateData = resault;
      } else {
        this.templateData = this.tempData;
      }
    },
    //设置模版
    setTemp() {
      console.log(this.checkedData);
      let resault = [];
      this.checkedData.forEach((item) => {
        resault = resault.concat(item.data);
      });
      let selectId = []
      this.tempData.forEach(item => {
        item.data.forEach(d =>{
          if(resault.indexOf(d.attribute)>-1){
            selectId.push(d.id)
          }
        })
      })
      console.log(selectId);
      updateTemplateFieldAttribution({
        gongxu: "细纱",
        selectId: selectId,
        templateNumber: this.labor
      }).then(res => {
        if(res.code == 1){
          this.$emit('update', resault);
          this.handleClose();
        }
      })
      console.log(resault);
      
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  background: #fff;
  margin-top: 15px;
  padding: 15px 50px;
}
::v-deep .el-dialog__wrapper {
  overflow: hidden;
}

.margin-top {
  margin-top: 15px;
}

.border {
  border: 1px solid #d4dae0;
  border-radius: 5px;
}
.checke-form {
  max-height: 65vh;
  overflow-y: scroll;
}

.head {
  height: 50px;
  padding: 0 30px;
}
.title {
  color: #000714;
  font-size: 14px;
  font-weight: 600;
}

.border-bottom {
  border-bottom: 1px solid #d4dae0;
}

.el-form-item {
  padding: 0 30px;
  height: 43px;
  margin: 0;
  ::v-deep &__content {
    line-height: 43px;
  }
}

::v-deep .pre-dialog {
  border-radius: 10px 10px 0 0;
  height: 100%;
  background: #f6f6f7;
  overflow: hidden;
}
::v-deep .el-radio {
  padding: 6px 20px 0 20px;
  margin: 0 15px 0 0 !important;
}

.check-box {
  margin-top: 20px;
  margin-bottom: 40px;
  max-height: 65vh;
  overflow-y: scroll;
  .checkbox-item {
    display: flex;
    align-items: center;
    background: #f6f6f7;
    margin-bottom: 12px;
    border: 1px solid #f0f2f6;
    .item-title {
      width: 170px;
      text-align: left;
      padding-left: 26px;
      box-sizing: border-box;
    }
    .item-content {
      flex: 1;
      background: #fff;
      padding: 15px 0 15px 34px;
    }
  }
}
</style>
